import React from 'react';
export default class ContextMenu extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			visible: false,
		};
	}

	componentDidMount() {
		document.addEventListener('contextmenu', this._handleContextMenu);
		document.addEventListener('click', this._handleClick);
		document.addEventListener('scroll', this._handleScroll);
	};

	componentWillUnmount() {
		document.removeEventListener('contextmenu', this._handleContextMenu);
		document.removeEventListener('click', this._handleClick);
		document.removeEventListener('scroll', this._handleScroll);
	}

	_handleContextMenu = (event) => {

		// this.setState({ visible:false });//当点击其他地方右键时可以根据需求来判断是否需要先关闭菜单
		event.preventDefault();

		this.setState({ visible: true });

		const clickX = event.clientX;
		const clickY = event.clientY;               //事件发生时鼠标的Y坐标
		const screenW = window.innerWidth;   //文档显示区的宽度
		const screenH = window.innerHeight;
		const rootW = this.root.offsetWidth;     //右键菜单本身元素的宽度
		const rootH = this.root.offsetHeight;

		// right为true，说明鼠标点击的位置到浏览器的右边界的宽度可以放contextmenu。

		// 否则，菜单放到左边。 // top和bottom，同理。

		const right = (screenW - clickX) > rootW;
		const left = !right;
		const top = (screenH - clickY) > rootH;
		const bottom = !top;
		console.log(right, left, top, bottom)

		if (right) {
			this.root.style.left = `${clickX + 15}px`;
		}

		if (left) {
			this.root.style.left = `${clickX - rootW - 15}px`;
		}

		if (top) {
			this.root.style.top = `${clickY + 15}px`;
		}

		if (bottom) {
			this.root.style.top = `${clickY - rootH - 15}px`;
		}
		console.log(this.root)
	};

	_handleClick = (event) => {
		const { visible } = this.state;
		const wasOutside = !(event.target.contains === this.root);

		if (wasOutside && visible) this.setState({ visible: false, });
	};

	_handleScroll = () => {
		const { visible } = this.state;

		if (visible) this.setState({ visible: false, });
	};

	render() {
		const { visible } = this.state;

		return <div>
			{
				visible ?
					<div ref={ref => { this.root = ref }} className="contextMenu" style={{width:'200px',height:'200px',color:'red',zIndex:'999'}}>
						<div>右键菜单内容</div>
					</div> : null
			}
		</div>

		
	};
}
